/**
  * Waterfall
  *
  * @author jh3y
*/

$no-of-el: 5;
$size: 20px;
$margin: 5px;
$offset: .25s;
$color: var(--primary);

@keyframes waterfall {
  0% {
    opacity: 0;
    transform: translateY(-250%);
  }
  40%,
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(250%);
  }
}

.waterfall {
  div {
    animation: waterfall 1.5s infinite;
    background-color: $color;
    height: $size;
    left: 50%;
    margin-top: -($size / 2);
    opacity: 0;
    position: absolute;
    top: 50%;
    width: $size;

    @for $el from 1 through $no-of-el {
      &:nth-of-type(#{$el}) {
        $marg: 0;
        @if ($el == 1) {
          $marg: ($size / -2);
        }
        @if ($el > 1) {
          $multiplier: $el;
          @if (($el % 2) > 0) {
            $multiplier: -($el - 1);
          }
          $marg: ((($multiplier / 2) - 1) * $size) + (($multiplier / 2) * $margin) + ($size / 2);
        }
        animation-delay: $el * $offset;
        margin-left: $marg;
      }
    }
  }
}
